<template>
  <ul class="list">
    <li v-for="(item, index) in arr" :key="index" v-show="index < maxLength"
      @click="$router.push(`/Details/?id=${item.id}`)">
      <section>
        <div class="itemImg">
          <img :src="imgBaseUrl + item.coverImg" alt="" />
        </div>

        <div class="box-bottom">
          <h3>{{ item.name }}</h3>
          <p>{{ item.coin }}积分</p>
          <div class="btn">立即兑换</div>
        </div>
        <!-- 左上角图片 -->
        <img class="flag" src="@/assets/img/section_hot.png" v-show="item.isHotSale" />
        <img class="flag" src="@/assets/img/section_new.png" v-show="item.isLatest" />
      </section>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ["arr", "maxLength"],
};
</script>

<style lang="less" scoped>
.list {
  display: flex;
  flex-wrap: wrap;

  li {
    &:nth-of-type(4n) {
      margin-right: 0;
    }

    width: 285px;
    margin-bottom: 20px;
    margin-right: 20px;
    position: relative;

    section {
      width: 285px;
      height: 492px;
      position: relative;
      transition: all 0.8s ease;

      .itemImg {
        img {
          width: 285px;
          height: 330px;
        }
      }
    }

    .box-bottom {
      width: 285px;
      height: 162px;
      margin-top: -5px;
      background-color: #fff;
      font-size: 18px;
      font-family: SourceHanSansSC, SourceHanSansSC-Light;
      text-align: center;

      h3 {
        height: 56px;
        line-height: 56px;
        font-weight: 300;
        color: #333333;
      }

      p {
        font-weight: 700;
        color: #fd604d;
      }

      .btn {
        width: 100px;
        height: 36px;
        font-weight: 300;
        text-align: center;
        line-height: 36px;
        margin: 20px auto 0;
        color: #0a328e;
        border: 1px solid #0a328e;
      }
    }

    .flag {
      position: absolute;
      top: 0;
      left: 0;
    }

    &:hover {
      cursor: pointer;

      section {
        margin-top: -15px;
        box-shadow: 0 0 10px #ccc;
      }

      .btn {
        color: #fff;
        background-color: #0a328e;
      }
    }
  }
}
</style>